<template>
  <router-view />
  <Player v-if="isPlaying" />
  <onDemandModal v-if="isDemand" :id="id" />
</template>
<script>
import { useStore } from "vuex";
import { ref, reactive, computed } from "vue";
import Player from "./components/Player.vue";
import onDemandModal from "./components/onDemandModal.vue";
import { authorize, getCode, getAccessToken } from "./utils/wxAuthorize";
import axios from "axios";
export default {
  name: "app",
  components: {
    Player,
    onDemandModal,
  },
  setup(props) {
    const store = useStore();
    const state = reactive(store.state);
    // 获取url参数
    const getQueryVariable = (variable) => {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
          return pair[1];
        }
      }
      return false;
    };
    const id = getQueryVariable("fileid");
    const openId = getQueryVariable("openId");
    if (openId != "9999") {
      if (!window.localStorage.getItem("openId") || window.localStorage.getItem("openId") == "undefined") {
        window.localStorage.setItem("openId", "");
        authorize();
        const code = getCode('code');
        getAccessToken(code, (openid) => {
          store.commit("setUserId", openid);
        });
      } else {
        store.commit("setUserId", window.localStorage.getItem("openId"));
      }
    }
    // 获取并设置分享参数
    const getShareMessage = () => {
      axios.post("/mguo/audio/getWXShare", {}).then((res) => {
        console.log(res);
        if (!res.data.msg || res.data.msg != "success") {
          return;
        }
        const { subtitle, targetUrl, title, url } = res.data.data;
        wx.ready(function () {
          //需在用户可能点击分享按钮前就先调用
          wx.updateAppMessageShareData({
            title: title, // 分享标题
            desc: subtitle, // 分享描述
            link: targetUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: "https://mangoytree.tingdao.com/logo.jpg", // 分享图标
            success: function () {
              // 设置成功
              // alert("分享成功！");
            },
            error: function () {
              // alert("分享失败");
            },
          });
        });
      });
    };
    // 获取到签名后的回调函数
    const callback = (res) => {
      console.log(res, "res");
      if (res.data.msg && res.data.msg == "success") {
        const data = res.data.data;
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: data.appid, // 必填，公众号的唯一标识
          timestamp: data.timestamp, // 必填，生成签名的时间戳
          nonceStr: data.nonceStr, // 必填，生成签名的随机串
          signature: data.signature, // 必填，签名
          jsApiList: ["updateAppMessageShareData"], // 必填，需要使用的JS接口列表
        });
        getShareMessage();
      }
    };
    // 获取用户登录信息，注入微信sdk
    axios
      .post(
        "/api/api/mguo/audio/getSignature?url=" + window.location.origin + "/",
        {
          // linkUrl: window.location.origin,
          // randNum: new Date().getTime(),
          // url: "https://mangoytree.tingdao.com",
          // randNum: 3460,
        }
      )
      .then((res) => {
        console.log(res);
        callback(res);
      });
    if (id) {
      store.commit("setDemand", true);
      store.commit("setScene", 48);
    }
    const isPlaying = computed(() => {
      return state.isPlaying;
    });
    const isDemand = computed(() => {
      return state.isDemand;
    });
    const playIngNo = computed(() => {
      return state.playIngNo;
    });

    if (state.pinDaoList.length == 0 && sessionStorage.getItem("baseData")) {
      if (sessionStorage.getItem("baseData") != "undefined")
        store.commit("setBase", JSON.parse(sessionStorage.getItem("baseData")));
    }

    if (state.scene == 0 && sessionStorage.getItem("scene")) {
      console.log("启用本地场景数据-app");
      store.commit("setScene", sessionStorage.getItem("scene"));
    }

    return {
      isPlaying,
      playIngNo,
      isDemand,
      id,
    };
  },
};
</script>
<style>
html {
  padding: 0;
  height: 100%;
  /* background: #d81519; */
}
body {
  margin: 0;
  height: 100%;
  background: url(./images/bg_s.png) no-repeat center 0 #d81519;
  background-size: 100%;
}
#app {
  height: 100%;
}
</style>
